<template>
    <div class="enroll">
        <div class="login-container">
            <h1 class="login-title">教室管理注册页面</h1>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="请输入用户名" v-model="username">
                <p v-if="!isValidUsername" class="error-message">用户名应为2到6个中文</p>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入密码" v-model="password">
                <p v-if="!isValidPassword" class="error-message">密码应为8到12个数字或字母</p>
            </div>
            <div class="form-group">
                <label for="mailbox">邮箱</label>
                <input type="text" id="mailbox" placeholder="请输入邮箱" v-model="email">
                <p v-if="!isValidEmail" class="error-message">请输入正确的邮箱格式</p>
            </div>
            <button class="login-button" @click="enroll()">注册</button>
            <p @click="$router.push('/')">已有账号？登录</p>
        </div>
    </div>
</template>

<script>
import { } from '../../utils/https.js'
export default {
    data() {
        return {
            username: '',
            password: '',
            email: '',
            isValidUsername: true,
            isValidPassword: true,
            isValidEmail: true
        }
    },
    methods: {
        //注册账号
        enroll() {
            //正则判断
            this.isValidUsername = /^[\u4e00-\u9fa5]{2,6}$/.test(this.username);//2到6个中文
            this.isValidPassword = /^[a-zA-Z0-9]{8,12}$/.test(this.password);//8到12个数字或字母
            this.isValidEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.email);//正确的邮箱格式
            
            if (this.isValidUsername && this.isValidPassword && this.isValidEmail) {
                localStorage.setItem('Account', JSON.stringify({
                    username: this.username,
                    password: this.password,
                    email: this.email
                }));
                this.$router.push('/');
            }
        }
    },
    components: {

    },
    created() {

    }
}
</script>

<style less>
.enroll {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('../assets/教室管理登录页图片.png');
    background-size: cover;

    .login-container {
        background-color: rgba(222, 180, 123, 0.3);
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 360px;

        >h1 {
            font-size: 22px;
        }

        .login-title {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }

        .form-group {
            margin-bottom: 20px;

            label {
                display: block;
                margin-bottom: 8px;
                color: #666;
            }

            input {
                width: 100%;
                padding: 12px;
                border: 1px solid #ddd;
                border-radius: 4px;
                box-sizing: border-box;
                transition: border-color 0.3s ease;

                &:focus {
                    outline: none;
                    border-color: #007bff;
                }
            }

            .error-message {
                color: red;
                font-size: 12px;
                margin-top: 5px;
            }
        }

        .login-button {
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 18px;

            &:hover {
                background-color: #0056b3;
            }
        }

        >p {
            float: right;
            font-size: 16px;
            color: rgb(57, 124, 255);
            cursor: pointer;
            font-style: italic;
            text-decoration: underline;
        }
    }
}
</style>    